<script setup>
import Box3D from '@/components/Box3D.vue';

const forntStyle = {
  color: 'white',
  fontSize: '14px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'pointer'
}
</script>

<template>
  <div class="filter-container">
    <Box3D :width="100" :height="40" :thickness="40" :frontExtraStyle="forntStyle">最新问题</Box3D>
    <Box3D :width="100" :height="40" :thickness="20" :frontExtraStyle="forntStyle">最多访问</Box3D>
    <Box3D :width="130" :height="40" :thickness="40" :frontExtraStyle="forntStyle">无回复的问题</Box3D>
  </div>
</template>

<style lang="sass" scoped>

.filter-container
  display: flex
  align-items: center
  transform-style: preserve-3d
  transform-origin: left top
  transform: rotateX(10deg) rotateY(20deg)
  perspective-origin: top
</style>
